<template>
  <!--类型管理页-->
  <div>
    <a-card class="contentFullHeight"  :bodyStyle="{padding : '10px 10px'}">
      <!--筛选、导入导出-->
      <a-card :bordered="true" class="searchBox" :bodyStyle="{padding : '10px 24px'}">
        <a-form layout="inline" enctype="multipart/form-data">
          <a-form-item label="类型名称">
            <a-input style="width: 150px" v-model="searchParams.name"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" icon="search" @click="handleSearch">查询</a-button>
          </a-form-item>
          <a-form-item>
            <!--新增-->
            <a-button type="primary" icon="plus" @click="handleCreate">新增</a-button>
          </a-form-item>
          <!--导入-->
          <a-form-item>
            <UploadCom :type="0" @handleSearch="handleSearch"></UploadCom>
          </a-form-item>
        </a-form>
      </a-card>
      <!--列表-->
      <a-table :columns="columns" :dataSource="data"
               bordered size="small" rowKey="id"
               :pagination="pagination" :loading="loading"
               @change="getTableData"
      >
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleUpdate(record)" href="javascript:;">编辑</a>
            <a-divider type="vertical"/>
            <a href="javascript:;" @click="showConfirm(record)">删除</a>
          </template>
        </span>
      </a-table>
      <!--新增/编辑弹窗-->
      <a-modal  :maskClosable="false"
                :title="mdl.dialogTitleMap[mdl.dialogStatus]"
                :width="1000"
                @ok="mdl.dialogStatus === 'create' ? createData() : updateData()"
                v-model="mdl.visible"
      >
        <a-form id="advForm">
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="类型名称"
          >
            <a-input placeholder="" v-model="mdl.formData.name"/>
          </a-form-item>
          <a-form-item
            :labelCol="mdl.labelCol"
            :wrapperCol="mdl.wrapperCol"
            label="类型备注"
          >
            <a-input placeholder="" v-model="mdl.formData.remake"/>
          </a-form-item>
        </a-form>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
  /* eslint-disable */
  import moment from 'moment';
  import UploadCom from '@/components/uploadCom';
  import {courseTypequery,courseTypeinsert,courseTypeup,courseTypedelete} from '@/api/courseManage/courseManage'
  export default {
    components: {
      UploadCom
    },
    data() {
      return {
        /*   -------搜索框--------*/
        searchParams: {
          name: ''
        },

        /*   -------分页--------*/
        pagination: this.$defaultSettings.pagination ,

        /*   -------弹窗--------*/
        mdl: {
          dialogStatus: '',
          dialogTitleMap: {
            update: '编辑',
            create: '添加'
          },
          visible: false,
          title: '',
          formData: {
            "courseCount": 0,
            "id": '',
            "name": "",
            "remake": ""
          },
          labelCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 5
            }
          },
          wrapperCol: {
            xs: {
              span: 24
            }
            ,
            sm: {
              span: 16
            }
          },
          formItemLayoutWithOutLabel: {
            wrapperCol: {
              xs: { span: 24, offset: 0 },
              sm: { span: 20, offset: 4 },
            },
          },
        },


        /*   -------表格--------*/
        loading: false,
        columns:[
          {
            title: '类型名称',
            dataIndex: 'name'
          },
          {
            title: '绑定课程数',
            dataIndex: 'courseCount',
//            scopedSlots: {customRender: 'userNumber'}
          },
          {
            title: '备注',
            dataIndex: 'remake'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: {customRender: 'action'}
          }
        ],
        data:[],

        // 下载
        downloadLoading: false,
      }
    },
    inject: ['upShow'],
    filters: {

    },
    created() {

    },
    mounted() {
      this.getTableData(this.pagination)
    },
    methods: {
      moment,
      /**
       *查询列表展示数据
       * */
      getTableData(pagination) {
        if(pagination!=undefined && pagination!='' && pagination!=null) {
          this.pagination = pagination
        }
        this.loading = true
        const parameter = {
          _search: true,//是否分页查询
          pageSize: this.pagination.pageSize || 10,
          pageNumber: this.pagination.current || 1,
          "data": {
            "courseCount": "",
            "id": '',
            "name": this.searchParams.name,
            "remake": ""
          },
        }
        courseTypequery(parameter).then(res => {
          this.loading = false
          this.pagination.total = res.data.total
          res.data.records.forEach(e=> {
              if(e.courseCount == '' || e.courseCount == null) {
                  e.courseCount = 0
              }
          })
          this.data = res.data.records
        }).catch(err => {
          this.loading = false
        })
      },
      handleSearch() {
        this.pagination.current = 1
        this.getTableData()
      },
      setDefaults() {
        this.mdl.formData = {
          "courseCount": 0,
          "id": '',
          "name": "",
          "remake": ""
        }
      },
      //添加行
      handleCreate() {
        this.setDefaults()
        this.mdl.dialogStatus = 'create'
        this.mdl.visible = true
      },
      //编辑当前行
      handleUpdate(row) {
        this.mdl.formData = Object.assign({}, row) // copy obj
        this.mdl.dialogStatus = 'update'
        this.mdl.visible = true
      },
      //          新增
      createData() {
        this.loading = true
        const parameter = this.mdl.formData
        courseTypeinsert(parameter).then(res => {
          this.loading = false
          if(res.code === 200) {
            this.upShow(1,"新增成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.loading = false
          this.upShow(2)
        })
      },
//      编辑
      updateData() {
        this.loading = true
        const parameter = this.mdl.formData
        courseTypeup(parameter).then(res => {
          this.loading = false
          if(res.code === 200) {
            this.upShow(1,"编辑成功")
            this.mdl.visible = false
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.loading = false
          this.upShow(2)
        })
      },
//      删除
      handleDelete(row) {
        courseTypedelete(row.id).then(res => {
          if(res.code === 200) {
            this.upShow(1,res.msg || '删除成功')
            this.handleSearch()
          } else {
            this.upShow(2,res.msg)
          }
        }).catch(err => {
          this.upShow(2)
        })
      },
      showConfirm(val) {
        let self = this;
        this.$confirm({
          title: '删除记录?',
          content: '确定删除该条数据',
          onOk() {
            self.handleDelete(val)
          },
          onCancel() {},
        });
      },
      //导入
      handleDownload() {
        this.downloadLoading = true
        let param  ={

        }
      },
    },
  }
</script>

<style scoped>

</style>